<script setup>
import { ref } from 'vue'
import TableElementPlus from '@/components/TableElementPlus.vue'
import TableVxeTable from '@/components/TableVxeTable.vue'
import TableVuetify from '@/components/TableVuetify.vue'

const tableConfig = ref([
  { prop: 'name', label: '名称' },
  { prop: 'age', label: '年龄' },
  { prop: 'city', label: '城市' },
])
const tableData = ref([
  { name: '张三', age: 25, city: '北京' },
  { name: '李四', age: 30, city: '上海' },
  { name: '王五', age: 28, city: '广州' },
  { name: '赵六', age: 35, city: '深圳' },
])
// ElementPlus.表格
const trColors = ref(['#e0eea9', '#7cdb94'])
const trsortable = ref(true)
const trStyle = ref({
  color: 'red',
  fontSize: '1rem',
  height: '3rem',
})
const trhaadStyle = ref({
  color: 'blue',
  fontSize: '2rem',
  height: '5rem',
})
// vxeTable表格
const trColors2 = ref(['#a6eeea', '#acdbf4'])
const trsortable2 = ref(true)
const trStyle2 = ref({
  color: 'blue',
  fontSize: '1.5rem',
  height: 80,
})
const trhaadStyle2 = ref({
  color: 'red',
  fontSize: '2rem',
  height: '4rem',
})
// Vuetify表格
const trColors3 = ref(['#decd5a', '#affc9a'])
const trsortable3 = ref(true)
const trStyle3 = ref({
  color: '#179eee',
  fontSize: '1.5rem',
  height: '2rem',
})
const trhaadStyle3 = ref({
  color: '#5aff9a',
  fontSize: '1.6rem',
  height: '3rem',
})
</script>

<template>
  <div class="main_container">
    <div class="element_table">
      <div>ElementPlus表格</div>
      <TableElementPlus
        :tableConfig="tableConfig"
        :tableData="tableData"
        :tableStripe="true"
        :tableSortable="trsortable"
        :tableRowColors="trColors"
        :tableScrollInterval="2000"
        :tableRowStyle="trStyle"
        :tableHeadStyle="trhaadStyle"
      ></TableElementPlus>
    </div>
    <div class="element_table">
      <div>vxeTable表格</div>
      <TableVxeTable
        :tableConfig="tableConfig"
        :tableData="tableData"
        :tableStripe="true"
        :tableSortable="trsortable2"
        :tableRowColors="trColors2"
        :tableScrollInterval="4000"
        :tableRowStyle="trStyle2"
        :tableHeadStyle="trhaadStyle2"
      ></TableVxeTable>
    </div>
    <div class="element_table">
      <div>Vuetify表格</div>
      <TableVuetify
        :tableConfig="tableConfig"
        :tableData="tableData"
        :tableStripe="true"
        :tableSortable="trsortable3"
        :tableRowColors="trColors3"
        :tableScrollInterval="3000"
        :tableRowStyle="trStyle3"
        :tableHeadStyle="trhaadStyle3"
      ></TableVuetify>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.main_container {
  width: 100vw;
  height: 100vh;
  position: relative;
  display: flex;
  // justify-content: flex-start;
  // align-items: flex-start;
  flex-wrap: wrap;
  .element_table {
    box-sizing: border-box;
    width: 50%;
    height: fit-content;
    margin: 0;
    padding: 0.5rem;
    border: 1px solid red;
  }
}
</style>
